13. Exercise: Add Material Attributes and Overlay

Now it's your turn to complete this exercise yourself!

In this exercise you'll learn how to change the Material theme's default styles.

1. Set title 'TextView's textAppearance.

In home_fragment.xml, add a textAppearance attribute to title and set it to ?textAppearanceHeadline5:

 android:textAppearance="?textAppearanceHeadline5"

2. Set subtitle's text appearance.

Add a textAppearance attribute to subtitle and set it to ?textAppearanceHeadline6:

 android:textAppearance="?textAppearanceHeadline6"

3. Replace styles with customized Material Design attributes.

In styles.xml, delete the two styles you added in an earlier lesson.

4. Replace textAppearanceHeadline6 with a custom attribute.

Inside AppTheme, assign a custom attribute to the default textAppearanceHeadline6:

<item name="textAppearanceHeadline6">@style/CustomHeadline6</item>

5. Define a CustomHeadline6 style.

Inside the new style, create a new style called CustomHeadline6 and inherit it from TextAppearance.MaterialComponents.Headline6. Inside the new style, define a textSize of 18sp.

<style name="CustomHeadline6" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="android:textSize">18sp</item>
</style>

Run the app and see how Android has applied your new Material Design styles!

6. Apply a Material Dark theme to the toolbar.

In activity_main.xml, add a MaterialComponents.Dark.ActionBar ThemeOverlay to the toolbar.

android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"

7. Change the toolbar’s background color by setting it to “?colorPrimary dark”, which is defined in AppTheme in styles.xml.

android:background="?attr/colorPrimaryDark" Material attribute.

Your styled Toolbar should look like this:

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
        android:background="?colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

Run your app again and verify that the toolbar now has the dark theme.

8. Set ImageView's tint.

Add a tint attribute to ImageView and set it to ?colorOnPrimary:

 android:tint="?colorOnPrimary"

Run your app again and verify that the toolbar now has a new tint.

If you want to start at this step, you can download this exercise from: Step.05-Exercise-Add-Material-Attributes-and-Overlay.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.05-Solution-Add-Material-Attributes-and-Overlay, or using this git diff.

Reference documentation

• Getting started with Material Components

Task List:

In home_fragment, replace the style attribute in title and subtitle TextViews with textAppearance.

In styles.xml, delete the Title and Subtitle styles you added in the earlier lesson.

Add a custom attribute to AppTheme to replace textAppearanceHeadline6.

Define a CustomHeadline6 style that extends the default Material Design style.

In activity_main.xml, add a MaterialComponents.Dark.ActionBar theme to the Toolbar, and set the background to ?colorPrimaryDark.